<template>
<div>
    <div class="addzz">
        <div slot="header" class="clearfix addzz-title">
            <span>{{temp.name}}</span>
        </div>
        <div>
            <el-form :rules="rules" ref="targetForm" :model="temp" label-width="150px" label-position='right' size="small">
                <el-row :gutter="5">
                    <el-col :span="12">
                        <el-form-item label="所属上级" prop="parentIdOzOrgOuinfoName">
                            <el-input v-model="temp.parentIdOzOrgOuinfoName" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="8">
                        <el-form-item label="组织机构名称" prop="name" size='small'>
                            <el-input v-model="temp.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="组织机构简称" prop="namePinyin" size='small'>
                            <el-input v-model="temp.namePinyin"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="组织机构编码" prop="code" size='small'>
                            <el-input v-model="temp.code"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="8">
                        <el-form-item label="组织机构类别" prop="ouCategory" size='small'>
                            <el-select clearable v-model="temp.ouCategory">
                                <el-option v-for="item in organizationCategoryOptions" :key="item.key" :label="item.display_name" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="组织机构类型" prop="type" size='small'>
                            <el-select clearable v-model="temp.type">
                                <el-option v-for="item in orgTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="排序号" prop="orderNo" size='small'>
                            <el-input v-model="temp.orderNo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="8">
                        <el-form-item label="组织机构性质" prop="ouNature" size='small'>
                            <el-select clearable v-model="temp.ouNature">
                                <el-option v-for="item in orgNatureOptions" :key="item.key" :label="item.display_name" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="所在地" prop="address" size='small'>
                            <el-input v-model="temp.address"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="8">
                        <el-form-item label="电子邮件" prop="email" size='small'>
                            <el-input v-model="temp.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话" prop="telephone" size='small'>
                            <el-input v-model="temp.telephone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="配置状态" prop="status" size='small'>
                            <el-radio v-model="temp.status" v-for="item in statusOptions" :key="item.key" :label="item.key">{{item.display_name}}</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="8">
                        <el-form-item label="临时组织机构" prop="tmpOu" size='small'>
                            <el-radio v-model="temp.tmpOu" v-for="item in yesOrNoOptions" :key="item.key" :label="item.key">{{item.display_name}}</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="有效日期" prop="validDate">
                            <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyyMMddHHmmss" v-model="temp.validDate" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-form-item label="备注说明" prop="memos" size='small'>
                        <el-input v-model="temp.memos" type="textarea" :rows="4"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-row :gutter="5">
                <el-col style="text-align: right;">
                    <el-button class="filter-item" type="primary" @click="saveData">保 存</el-button>
                </el-col>
            </el-row>
            <div class="addzz-line"></div>
            <el-row :gutter="5">
                <el-tabs class="addzz-tab" style='margin-top:15px;' v-model="activeName" type="border-card" @tab-click="handleClick">
                    <el-tab-pane :label="'负责人'" name="containPrincipal">
                        <tab-pane-org-principal :disPlayFlag="activeName == 'containPrincipal'" :targetOrgId="targetOrgId1"></tab-pane-org-principal>
                    </el-tab-pane>
                    <el-tab-pane :label="'所属岗位'" name="containJob">
                        <tab-pane-org-contain-job :disPlayFlag="activeName == 'containJob'" :targetOrgId="targetOrgId1"></tab-pane-org-contain-job>
                    </el-tab-pane>
                    <el-tab-pane :label="'包含用户'" name="containUser">
                        <tab-pane-org-contain-user :disPlayFlag="activeName == 'containUser'" :targetOrgId="targetOrgId1"></tab-pane-org-contain-user>
                    </el-tab-pane>
                </el-tabs>
            </el-row>
        </div>
    </div>
</div>
</template>

<script>
import '@/styles/newstyle.scss'
import {
  insertItem,
  compositeSelect,
  updateItem,
  forceDeleteItem
} from '@/api/systemManage/organizationEdit'
import {
  statusOptions,
  yesOrNoOptions,
  organizationCategoryOptions,
  orgTypeOptions,
  orgNatureOptions
} from '@/utils/allOptions'
import tabPaneOrgPrincipal from './tabPaneOrgPrincipal'
import tabPaneOrgContainJob from './tabPaneOrgContainJob'
import tabPaneOrgContainUser from './tabPaneOrgContainUser'
export default {
  name: 'userManagementEdit',
  components: {
    tabPaneOrgPrincipal,
    tabPaneOrgContainJob,
    tabPaneOrgContainUser
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    editType: {
      type: String,
      default: ''
    },
    parentOuinfoId: {
      type: String,
      default: ''
    },
    parentOuinfoName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // -------Options-----------
      statusOptions,
      yesOrNoOptions,
      organizationCategoryOptions,
      orgTypeOptions,
      orgNatureOptions,

      // -------Options-----------
      temp: {
        id: '',
        unitId: '',
        parentId: '',
        status: '0',
        ouType: '',
        name: '',
        namePinyin: '',
        code: '',
        type: '',
        orderNo: '',
        ouRank: '',
        tmpOu: 'N',
        vsDate: '',
        veDate: '',
        address: '',
        zipcode: '',
        telephone: '',
        email: '',
        memos: '',
        thirdId: '',
        ouAddress: '',
        ouCategory: '',
        corpId: '',
        ouNature: '',
        parentIdOzOrgOuinfoName: '',
        validDate: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入组织机构名称',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        namePinyin: [{
          required: true,
          message: '请输入组织机构简称',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],

        code: [{
          required: true,
          message: '请输入组织机构编码',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        ouCategory: [{
          required: true,
          message: '请输入组织机构类别',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请输入组织机构类型',
          trigger: 'blur'
        }],
        orderNo: [{
          required: true,
          message: '请输入排序号',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        address: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        email: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        telephone: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        tmpOu: [{
          min: 0,
          max: 1,
          message: '长度在 0 到 1 个字符',
          trigger: 'blur'
        },
        {
          max: 1,
          message: '最大 1 个字符',
          trigger: 'blur'
        }
        ],
        memos: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ]
      },
      activeName: '',
      tabPaneNameArray: [],
      targetOrgId1: '',
      paneDisPlayFlag: ''
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name)
      this.activeName = tab.name
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          const targetData = {
            'parentId': this.temp.parentId,
            'status': this.temp.status,
            'ouType': this.temp.ouType,
            'name': this.temp.name,
            'namePinyin': this.temp.namePinyin,
            'code': this.temp.code,
            'type': this.temp.type,
            'orderNo': this.temp.orderNo,
            'ouRank': this.temp.ouRank,
            'tmpOu': this.temp.tmpOu,
            'vsDate': this.temp.vsDate,
            'veDate': this.temp.veDate,
            'address': this.temp.address,
            'zipcode': this.temp.zipcode,
            'telephone': this.temp.telephone,
            'email': this.temp.email,
            'memos': this.temp.memos,
            'thirdId': this.temp.thirdId,
            'ouAddress': this.temp.ouAddress,
            'ouCategory': this.temp.ouCategory,
            'corpId': this.temp.corpId,
            'ouNature': this.temp.ouNature
          }
          if (this.temp.validDate) {
            targetData.vsDate = this.temp.validDate[0]
            targetData.veDate = this.temp.validDate[1]
          }
          if (this.editType === '1') {
            updateItem(targetData.id, targetData).then(() => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          } else {
            insertItem(targetData).then(response => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              console.log(response.data)
              this.targetOrgId1 = response.data.data.id
            })
          }
        }
      })
    },
    fetchData() {
      const searchCon = {
        condition: {
          id: {
            property: 'id',
            value: this.$route.params.id,
            type: 'EQ'
          }
        },
        fields: [
          'id',
          'unitId',
          'parentId',
          'status',
          'ouType',
          'name',
          'namePinyin',
          'code',
          'type',
          'orderNo',
          'ouRank',
          'tmpOu',
          'vsDate',
          'veDate',
          'address',
          'zipcode',
          'telephone',
          'email',
          'memos',
          'thirdId',
          'ouAddress',
          'ouCategory',
          'corpId',
          'ouNature',
          'parentIdOzOrgOuinfoName'
        ]
      }
      compositeSelect(searchCon).then(response => {
        if (response.data.data.count > 0) {
          const resData = response.data.data.records[0]
          this.temp = Object.assign({}, resData) // copy obj   this.subSystemsOptions.push(input);
          if (resData.vsDate) {
            this.temp.validDate = [resData.vsDate, resData.veDate]
          }
        }
      })
    },
    handleDelete() {
      this.clickType = 'delete'
      this.$confirm(
        '此操作将删除组织机构【' +
                    this.currentData.name +
                    '】, 是否继续?',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          const data = {
            'id': this.currentData.id
          }
          forceDeleteItem(data).then(response => {
            this.$message({
              message: '组织机构【' + this.currentData.name + '】已经被删除。',
              type: 'success'
            })
            this.resetInfo()
            this.handleReset()
          })
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>
